<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="content">
        <div class="head">
            <div class="face-box">
                <div class="face">
                <div class="eyes">
                    <div class="eye-left eye">
                        <div class="left-eye-black eye-black">
                            <div></div>
                            <div></div>
                            <div class="eye-little-white"></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="eye-right eye">
                        <div class="right-eye-black eye-black">
                            <div></div>
                            <div class="eye-little-white"></div>
                            <div></div>
                        </div>
                    </div>
                </div>
                <div class="noes"></div>
                <div class="beard">
                    <div class="beard-middle beard-left"></div>
                    <div class="beard-middle beard-right"></div>
                    <div class="beard-left-up beard-inclined"></div>
                    <div class="beard-right-up beard-inclined"></div>
                    <div class="beard-left-down beard-inclined"></div>
                    <div class="beard-right-down beard-inclined"></div>
                    <div class="beard-down"></div>
                </div>
                <div class="mouth">
                    <div class="tongue-left"></div>
                    <div class="tongue-right"></div>
                </div>
            </div>
            </div>
        </div>
        <div class="collar">
            <div class="bell">
                <div class="circle"></div>
                <div class="bar"></div>
            </div>
        </div>
        <div class="hand">
            <div class="left-hand"></div>
            <div class="right-hand"></div>
        </div>
        <div class="arm">
            <div class="left-arm"></div>
            <div class="right-arm"></div>
        </div>
        <div class="body">
            <div class="belly"></div>
        </div>
        <div class="foots">
            <div class="left-foot"></div>
            <div class="right-foot"></div>
        </div>

    </div>
</div>
</body>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .content{
        height: 0;
        position: absolute;
        left: calc(50% - 100px);
        top: 200px;
    }

    .head {
        width: 200px;
        height: 200px;
        background: #00a0e8;
        border: 2px solid black;
        border-radius: 100px;
        position: relative;
        z-index: 10;
    }

    .face-box{
        position: absolute;
        left: 15px;
        top: 15px;
    }

    .face {
        width: 170px;
        height: 170px;
        background: #FFFFFF;
        border: 2px solid black;
        border-radius: 85px;
        position: relative;
    }

    .eyes {
        width: 120px;
        height: 60px;
        position: relative;
        left: calc(50% - 60px);
    }

    .eye {
        width: 58px;
        height: 58px;
        background: #FFFFFF;
        border: 1px solid black;
        border-radius: 50%;
        position: relative;
    }

    .eye-right{
        position: absolute;
        right: 0;
        top: 0;
    }

    .eye-black {
        width: 16px;
        height: 24px;
        background: black;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
    }

    .left-eye-black {
        top: 33%;
        right: 8px;
    }

    .right-eye-black {
        top: 33%;
        left: 8px;
    }

    .eye-little-white {
        width: 4px;
        height: 6px;
        background: #FFFFFF;
        border-radius: 50%;
    }

    .noes {
        width: 36px;
        height: 36px;
        background: #b11735;
        border-radius: 50%;
        border: 1px solid black;
        position: absolute;
        left: calc(50% - 18px);
        top: 52px
    }

    .noes::after {
        content: '';
        width: 10px;
        height: 10px;
        background: #FFFFFF;
        border-radius: 50%;
        display: block;
        position: absolute;
        left: 8px;
        top: 8px;
    }

    .beard-middle {
        width: 56px;
        height: 0;
        border: 1px solid black;
        position: absolute;
        top: calc(50% - 8px);
    }

    .beard-left {
        left: 4px;
    }

    .beard-right {
        right: 4px;
    }

    .beard-inclined {
        width: 60px;
        height: 0;
        border: 1px solid black;
        position: absolute;
    }

    .beard-left-up {
        left: -4px;
        top: calc(50% - 20px);
        transform: rotate(12deg);
    }

    .beard-right-up {
        right: -4px;
        top: calc(50% - 20px);
        transform: rotate(-12deg);
    }

    .beard-left-down {
        left: -4px;
        top: calc(50% + 4px);
        transform: rotate(-12deg);
    }

    .beard-right-down {
        right: -4px;
        top: calc(50% + 4px);
        transform: rotate(12deg);
    }

    .beard-down {
        width: 0;
        height: 10px;
        border: 2px solid black;
        position: absolute;
        left: calc(50% - 1px);
        top: calc(50% + 4px);
    }

    .mouth {
        width: 128px;
        height: 64px;
        background: #b11635;
        border-radius: 0 0 100px 100px;
        position: absolute;
        top: 100px;
        left: 22px;
        overflow: hidden; /*  这个容器里面的东西不得超出自身展示  */

    }

    .tongue-left {
        width: 52px;
        height: 52px;
        background: #ca2533;
        border-radius: 50%;
        position: absolute;
        right: calc(50% - 10px);
        bottom: -10px;
    }

    .tongue-right {
        width: 52px;
        height: 52px;
        background: #ca2533;
        border-radius: 50%;
        position: absolute;
        left: calc(50% - 8px);
        bottom: -10px;
    }

    .collar {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: #a1172e;
        position: absolute;
        top: calc(50% + 56px);
        left: calc(50% - 80px);
        z-index: 9;
    }

    .bell {
        width: 32px;
        height: 30px;
        border: 2px solid black;
        border-radius: 50%;
        background: #f19629;
        position: absolute;
        left: calc(50% - 16px);
        top: calc(50% + 67px);
    }

    .circle {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: black;
        position: absolute;
        left: calc(50% - 4px);
        top: calc(50% - 1px);
    }

    .bar {
        width: 15px;
        height: 0;
        border: 2px solid black;
        position: absolute;
        left: calc(50% - 9px);
        top: calc(50% + 8px);
    }

    .hand{
        position: relative;
        top: -84px;
    }

    .left-hand {
        width: 60px;
        height: 60px;
        background: #FFFFFF;
        border: 2px solid black;
        border-radius: 50%;
        position: absolute;
        left: -28px;
        z-index: 9;
    }

    .right-hand {
        width: 60px;
        height: 60px;
        background: #FFFFFF;
        border: 2px solid black;
        border-radius: 50%;
        position: absolute;
        right: -28px;
        z-index: 9;
    }

    .arm{
        position: relative;
        top: -92px;
    }

    .left-arm{
        width: 100px;
        height: 100px;
        background: #35a1c9;
        border: 2px solid black;
        border-radius: 50%;
        position: absolute;
        left: 0;
        z-index: 3;
    }

    .right-arm{
        width: 100px;
        height: 100px;
        background: #35a1c9;
        border: 2px solid black;
        border-radius: 50%;
        position: absolute;
        right: 0;
        z-index: 3;
    }

    .body{
        width: 140px;
        height: 140px;
        background: #35a1c9;
        border-radius: 50%;
        border: 2px solid black;
        position: absolute;
        left: calc(50% - 70px);
        top: 150px;
        z-index: 2;
    }

    .belly{
        width: 100px;
        height: 70px;
        background: white;
        border-radius: 50%;
        position: absolute;
        left: calc(50% - 50px);
        top: 55px;
    }

    .belly::after{
        display: block; /* 搞成块级元素 */
        content: '';
        width: 60px;
        height: 28px;
        background: none;
        border-radius: 0 0 100px 100px;
        border: 2px solid black;
        position: absolute;
        left: calc(50% - 32px);
        top: 20px;
    }

    .foots{
        position: relative;
    }

    .left-foot {
        width: 60px;
        height: 60px;
        background: #FFFFFF;
        border: 2px solid black;
        border-radius: 50%;
        position: absolute;
        left: calc(50% - 70px);
        top: 50px;
        z-index: 0;
    }

    .right-foot {
        width: 60px;
        height: 60px;
        background: #FFFFFF;
        border: 2px solid black;
        border-radius: 50%;
        position: absolute;
        right: calc(50% - 70px);
        top: 50px;
        z-index: 0;
    }

</style>
</html>